<!DOCTYPE html>

<html>

<head>
	<title>Discussions</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="lib.css">
	<script>
	var providers = new Array('gmail', 'yahoo', 'hotmail', 'aol');

	function showDD(radioID) {
		for (var i=0; i < providers.length; i++) {
			if (document.getElementById(providers[i] + "DD").style.display="block") {
				(document.getElementById(providers[i] + "DD").style.display="none");
			}
		}
		document.getElementById(radioID + "DD").style.display="block";
		document.getElementById(radioID).checked=true;
	}
	
	function hideDD(radioID) {
		for (var i=0; i < providers.length; i++) {
			(document.getElementById(providers[i] + "DD").style.display="none");
		}
		document.getElementById(radioID).checked=true;
	}
	</script>
</head>


<body>

<form class="openID modal" method="get" action="reg04.html">
	<h1>Join the community</h1>
	<fieldset>
		<h2>You need an email address to join. Which email account would you like to use?</h2>		
		<dl class="emailChoice">
			<dt>
				<input type="radio" name="openID" value="gmail" id="gmail" onfocus="showDD(this.id)" />
				<label for="gmail">Gmail</label>
			</dt>
			<dd id="gmailDD">
				<ul>
				<li>
					<label for="sn_gmail">Username</label>
					<input type="text" id="sn_gmail" />
					<label for="sn_gmail">Example: yourname@gmail.com</label>
				</li>
				<li>
					<label for="pw_gmail">Password</label>
					<input type="password" id="pw_gmail" />
				</li>
				</ul>
			</dd>

			<dt>
				<input type="radio" name="openID" value="yahoo" id="yahoo"  onfocus="showDD(this.id)" />
				<label for="yahoo">Yahoo! Mail</label>
			</dt>
			<dd id="yahooDD">
				<ul>
				<li>
					<label for="sn_yahoo">Username</label>
					<input type="text" id="sn_yahoo" />
					<label for="sn_yahoo">Example: yourname@yahoo.com</label>
				</li>
				<li>
					<label for="pw_yahoo">Password</label>
					<input type="password" id="pw_yahoo" />
				</li>
				</ul>
			</dd>

			<dt>
				<input type="radio" name="openID" value="hotmail" id="hotmail" onfocus="showDD(this.id)" />
				<label for="hotmail">Hotmail</label>
			</dt>
			<dd id="hotmailDD">
				<ul>
				<li>
					<label for="sn_hotmail">Username</label>
					<input type="text" id="sn_hotmail" />
					<label for="sn_hotmail">Example: yourname@hotmail.com</label>
				</li>
				<li>
					<label for="pw_hotmail">Password</label>
					<input type="password" id="pw_hotmail" />
				</li>
				</ul>
			</dd>				
			
			<dt>
				<input type="radio" name="openID" value="aol" id="aol" onfocus="showDD(this.id)" />
				<label for="aol">AOL Mail</label>
			</dt>
			<dd id="aolDD">
				<ul>
				<li>
					<label for="sn_aol">Username</label>
					<input type="text" id="sn_aol" />
					<label for="sn_aol">Example: yourname@aol.com</label>
				</li>
				<li>
					<label for="pw_aol">Password</label>
					<input type="password" id="pw_aol" />
				</li>
				</ul>
			</dd>				
		</dl>
		<ul>
			<li>
				<input type="radio" name="openID" value="none" id="none" onfocus="hideDD(this.id);"/>
				<label for="none">I don't have an email account. Help me create one.</label>
			</li>
		</ul>
		
		<input type="button" value="Previous" onclick="window.location.href='reg02.html';" />
		<input type="submit" value="Next" />		
		
	</fieldset>
	<input type="button" value="X" class="close" onclick="window.location.href='dis01.html';" />
</form><!-- .openID -->
	
</body>
</html>